<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="../js/jquery-3.5.1.js"></script>
</head>
<body>
<div id="app">
    <div class="text-center" style="line-height:50px;font-size:20px">
        热门APP下载
    </div>
    <div class="container">
        <div class="row text-center">

            <div class="col-md-2 table-bordered" style="padding-top: 15px" v-for="app in appList">
                <a href="#" style="text-decoration: none">
                    <img :src="app.appImg" width="80%">
                    <p style="margin-top: 10px;color: orangered">app名称:{{app.appName}}</p>
                    <p style="color: gray">下载次数:{{app.appCount}}次</p>
                </a>
            </div>
        </div>
        <div class="text-center">
            <ul class="pagination">
                <li @click="changePage(-1)"><a href="#">&laquo;</a></li>
                <li v-for="page in pageList"  @click="changePage(page)"><a href="#">{{page}}</a></li>
                <li @click="changePage(-2)"><a href="#">&raquo;</a></li>
            </ul>
        </div>
    </div>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
    let pageCout=12;
    let vue=new Vue({
      el:"#app",
      data:{
          appList:[],
          pageList:[],
      },
      methods:{
          querryApp(nowPage){
            $.ajax({
                url:"../queryApp",
                type:"post",
                data:{"nowPage":nowPage,"appStatus":1,"pageCout":pageCout},
                dataType:"json",
                success:(info)=>{
                 this.appList=info.list;
                 this.pageList=info.navigateLastPage;
                }
            })
          },changePage(page){
              this.querryApp(page);
          }
      },created(){
          this.querryApp(1);
        }


    })





</script>
</body>
</html>